<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" @close="dialogVisibleClose" lock-scroll width="40%">
      <div slot="title" class="header_title">
        <span class="title_span">{{ titleName }}</span>
      </div>
      <div class="content_div">
        <div class="info_table">
          <el-table
            show-summary
            :summary-method="getSummaries"
            :data="paymentData"
            height="100%"
            border
            :header-cell-style="{ background: '#EDEDED', color: '#666666', textAlign: 'center' }"
            :cell-style="{ textAlign: 'left' }"
            @row-click="onClickRow"
          >
            <el-table-column prop="xh" label="序号" width="70px"></el-table-column>
            <el-table-column prop="bankName" label="账户名称" min-width="100px"></el-table-column>
            <el-table-column prop="price" label="金额" min-width="100px">
              <template slot-scope="scope">
                <div v-if="scope.row.xhState">{{ scope.row.price }}</div>
                <div v-else class="index_input">
                  <input
                    @focusin="focusinSelect"
                    type="text"
                    v-model="scope.row.price"
                    onkeyup="value=value.replace(/[^\d.]/g,'')"
                    @blur="blurSelect(scope)"
                  />
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="info_button">
          <el-button type="primary" @click="onSelectRow">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatPrice, formatNumber, formatMoney, delcommafy } from '../../utils';
export default {
  name: 'BasicInformation',
  computed: {
    ...mapGetters(['name']),
  },
  created () { },
  props: {
    titleName: String,
    paymentData: Array,
  },
  data () {
    return {
      dialogVisible: false, // 新增弹框
    }
  },
  watch: {
    dialogVisible (val) {
      if (!val) {
        this.paymentData.forEach((element) => {
          element.price = formatMoney(0)
        });
      }
    }
  },
  methods: {
    async getAccountData () {
      const data = await getAction('/xghBank/xghBank/listNoPage', {})
      if (data.code !== 200) {
        return this.$elMessage.error('获取数据失败！')
      }
      this.paymentData = []
      for (let i = 0; i < data.result.length; i++) {
        this.paymentData.push({
          xh: i + 1,
          id: data.result[i].id,
          bankName: data.result[i].bankName,
          isDefault: data.result[i].defaultFlag,
          price: 0,
          xhState: true,
        })
      }
    },
    // 处理数据回显
    handleDataEcho (list) {
      if (!this.paymentData || this.paymentData.length == 0) {
        this.getAccountData()
      }
      if (list && list.length) {
        list.forEach((item) => {
          this.paymentData.forEach((element) => {
            if (item.bankId == element.id) {
              element.price = formatMoney(item.price)
            }
          });
        })
      }
    },
    // 选中当前行
    onClickRow (row) {
      this.paymentData.forEach((item) => {
        if (item.zhmc == row.zhmc) {
          item.xhState = false
        } else {
          item.xhState = true
        }
      })
    },
    // 选中后传递给父组件
    onSelectRow () {
      this.$emit('onSelectPayment', this.paymentData)
      this.dialogVisible = false
    },
    dialogVisibleClose () {
      this.$emit('onCancelPayment')
    },
    // 新增数据中表格内输入框聚焦时选中
    focusinSelect () {
      event.target.select()
    },
    blurSelect (scope) {
      console.log(scope.row.price);
      scope.row.price = formatNumber(Math.abs(scope.row.price))
    },
    // 合计列计算
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 2) {
          const values = data.map((item) => Math.abs(delcommafy(item[column.property])))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = formatNumber(sums[index])
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 100%;
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__header {
    width: 100%;
    height: 0.937559rem;
    box-sizing: border-box;
    padding: 0 0.187512rem 0 0.281268rem;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dialog__headerbtn {
      position: static;
      .el-icon-close {
        color: #999;
        font-size: 0.48753rem;
      }
    }
  }
  .header_title {
    width: 100%;
    display: flex;
    align-items: center;
    .title_span {
      white-space: nowrap;
      font-size: 0.300019rem;
      color: #666;
      font-weight: 600;
    }
  }
}
.content_div {
  width: 100%;
  height: 8.438027rem;
  height: 6.206638rem;
  background: #fff;
  box-sizing: border-box;
  padding: 0.187512rem 0.281268rem 0;
  .info_table {
    width: 100%;
    height: calc(100% - 1.312582rem);
    display: flex;
    ::v-deep .el-table {
      border: 1px solid #e3e3e3;
      border-bottom: none;
      box-sizing: border-box;
      td,
      th {
        padding: 0;
        font-size: 0.225014rem;
        color: #666;
        height: 0.562535rem;
        background: #fff;
      }
      th {
        background: #eeeeee;
      }
      .el-table__footer-wrapper {
        td {
          background: #eeeeee;
        }
      }
      .index_input {
        display: flex;
        align-items: center;
        width: 100%;
        input {
          width: 100%;
          height: 0.450028rem;
          padding: 0 0.112507rem;
          border-radius: 0;
          background: #ffffff;
          border: 1px solid #e3e3e3;
          color: #666;
          &:focus {
            outline: none;
            border-color: #1b94fb;
          }
        }
        > div {
          width: 100%;
          display: flex;
          > input {
            width: calc(100% - 0.787549rem);
            border-color: #1b94fb;
          }
          > p {
            margin: 0;
            width: 0.787549rem;
            height: 0.450028rem;
            line-height: 0.450028rem;
            background: #1b94fb;
            color: #fff;
            cursor: pointer;
          }
        }
      }
      .el-table__body tr:hover > td {
        background-color: #e3f6ff;
      }
      //滚动条的宽度
      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #e5e5e5;
      }
      //滚动条的滑块
      ::-webkit-scrollbar-thumb {
        background-color: #c9c9c9;
      }
    }
  }
  .info_button {
    width: 100%;
    height: 1.312582rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    ::v-deep .el-button {
      width: 1.12507rem;
      height: 0.562535rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.093756rem;
    }
  }
}
</style>